<template>
    <div>
        <Alert type="success">发件箱设置（站内所有邮件均由此邮箱发送，如会员密码找回邮件等）</Alert>
        <Form ref="EditForm" :model="formData" label-position="right" :label-width="150">
            <Row :gutter="16">

                <Col :xs="24" :md="24">
                    <FormItem label="发件人" prop="sendUser" :rules="{required: true, message:'不能为空', trigger: 'blur'}">
                        <Input  v-model="formData.sendUser"></Input>
                        <div style="color:#c0c0c0">所显示的发件人姓名。前端变量名为：cms.mail.sendUser</div>
                    </FormItem>
                </Col>

                <Col :xs="24" :md="24">
                    <FormItem label="邮箱账号" prop="account" :rules="{required: true, message:'不能为空', trigger: 'blur'}">
                        <Input  v-model="formData.account"></Input>
                        <div style="color:#c0c0c0">用于发送邮件的邮箱账号。前端变量名为：cms.mail.account</div>
                    </FormItem>
                </Col>

                <Col :xs="24" :md="24">
                    <FormItem label="邮箱密码" prop="pwd" :rules="{required: true, message:'不能为空', trigger: 'blur'}">
                        <Input type="password"  v-model="formData.pwd"></Input>
                        <div style="color:#c0c0c0"> 用于发送邮件的邮箱密码。前端变量名为：cms.mail.pwd</div>
                    </FormItem>
                </Col>

                <Col :xs="24" :md="24">
                    <FormItem label="SMTP" prop="smtp" :rules="{required: true, message:'不能为空', trigger: 'blur'}">
                        <Input  v-model="formData.smtp"></Input>
                        <div style="color:#c0c0c0">邮箱服务器smtp地址，如QQ邮箱为smtp.qq.com。前端变量名为：cms.mail.smtp</div>
                    </FormItem>
                </Col>

                <Col :xs="24" :md="24">
                    <FormItem label="发送端口" prop="port" :rules="{required: true, message:'不能为空', trigger: 'blur'}">
                        <Input  v-model="formData.port" ></Input>
                        <div style="color:#c0c0c0">用于邮件发送端口（咨询邮箱服务商获得，TLS一般为25，SSL一般为465)。前端变量名为：cms.mail.port</div>
                    </FormItem>
                </Col>

                <Col :xs="24" :md="24">
                    <FormItem label="发送方式" prop="sendType" :rules="{required: true, message:'不能为空', trigger: 'blur'}">
                        <RadioGroup v-model="formData.sendType">
                            <Radio label="SSL">SSL服务方式</Radio>
                            <Radio label="TLS">TLS服务方式</Radio>
                        </RadioGroup>
                        <div style="color:#c0c0c0">默认邮箱服务方式为TLS（咨询空间商获得） 如果使用TLS方式25端口无法发送邮件，请尝试使用SSL方式465。端口发件前端变量名为：cms.mail.sendType</div>
                    </FormItem>
                </Col>



            </Row>
            <Row>
                <Col>
                    <FormItem>
                        <Button type="primary" @click="handleSubmit()">提交</Button>
                        <Button @click="handleReset()" style="margin-left: 8px">重置</Button>
                    </FormItem>
                </Col>
            </Row>


        </Form>


    </div>
</template>

<script>

    import AppFrame from '../../../libs/app-frame';
    import FileSelect from '../../../components/file-select';
    export default {
        components:{
            FileSelect
        },
        data: function() {
            return {
                state: { //数据加载状态
                    isLoadingData: false,
                    isChangeData: false
                },

                formData: {
                    sendUser:'',
                    port:'25',
                    sendType:'TLS'
                },
                query: {}
            }
        },
        created: function() {
            this.query = this.$route.query;
            this.getFormData();
        },
        methods: {
            getFormData() {
                let self = this;
                self.state.isLoadingData = true;
                let postData = {
                    label: '_mail',
                };
                AppFrame.Http.Post("/manage-api/cms/setting/getInfo", postData).then(function(Ret) {
                    if (Ret.Result === 1 && Ret.Data) {
                        self.formData=Ret.Data;
                    }
                }).catch(function(err) {
                    this.$Message.error(JSON.stringify(err));
                });
            },
            handleSubmit() {
                let self = this;
                this.$refs["EditForm"].validate((valid) => {

                    if (valid) {
                        let postData={
                            label:'_mail',
                            model:JSON.stringify(self.formData)
                        };

                        AppFrame.Http.Post("/manage-api/cms/setting/setInfo", postData, function(err, ret) {
                            if (ret && ret.Result === 1) {
                                self.$Message.success('保存成功');

                            } else {
                                self.$Message.error(ret.Msg);
                            }
                        })
                    }
                });
            },
            handleReset() {
                this.$refs["EditForm"].resetFields();
            },
        }
    }
</script>

<style scoped>

</style>
